<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div style="width: 100%;text-align: center;">
        <h2>表白墙</h2>
        谁&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input id="username"><p></p>
        对谁&nbsp;&nbsp;&nbsp;<input id="tousername"><p></p>
        说什么&nbsp;<input id="saying"><p></p>
        <input type="button" value="submit" onclick="mysubmit()"><p></p>
        <div id="all_msg">

        </div>
    </div>
    <script>
        function mysubmit(){
            var iptusername=jQuery("#username");
            var ipttousername=jQuery("#tousername");
            var iptsaying=jQuery("#saying");
            if(iptusername.val().trim()=="")
            {
                alert("请输入您的名字");
                iptusername.focus();
                return;
            }
            if(ipttousername.val().trim()=="")
            {
                alert("请输入对方的名字");
                ipttousername.focus();
                return;
            }            
            if(iptsaying.val().trim()=="")
            {
                alert("请输入内容");
                iptsaying.focus();
                return;
            }
            //1.非空校验
            //2.展示内容
            jQuery("#all_msg").append(iptusername.val()+"对"+ipttousername.val()+"说:"+iptsaying.val()+"<p></p>");
            //3.清空内容
            iptusername.val("");
            ipttousername.val("");
            iptsaying.val("");

        }

    </script>
</body>
</html>